
@import url("common.css");


.first {
    flex-flow: row nowrap;
    justify-content: space-between;
}

.first>.flex-item {
    /* flex: 1 1 auto;*/
    flex: auto;
}

.first>.flex-item:nth-child(1) {
    order: 250;
    background: #dfdfdf;
}

.first>.flex-item:nth-child(2) {
    order: -250;
    background: #ffff00;
}

.first>.flex-item:nth-child(3) {
    order: 100;
    background: #9696ff;
}
.first>.flex-item:nth-child(4) {
    order: 99;
    background: #ff9696;
}

.second {
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 300px;
}

.second>.flex-item {
    /* flex: 1 1 auto;*/
    flex: auto;
}

.second>.flex-item:nth-child(1) {
    order: 20;
    background: #dfdfdf;
}

.second>.flex-item:nth-child(2) {
    order: 17;
    background: #ffff00;
}

.second>.flex-item:nth-child(3) {
    order: 19;
    background: #9696ff;
}
.second>.flex-item:nth-child(4) {
    order: 18;
    background: #ff9696;
}